<template>
  <div id="home">
    <van-row>
      <!-- 顶部标题    -->
      <van-col span="24">
        <van-nav-bar title="首页" />
      </van-col>
      <!-- 搜索框 -->
      <van-col span="24">
        <van-search v-model="SearchValue" placeholder="请输入搜索关键词" input-align="center" @click="onGoSearch" />
      </van-col>
      <!-- 轮播图 -->
      <van-col span="24">
        <van-swipe :autoplay="1000" class="swipe-img">
          <van-swipe-item v-for="(imaga, index) in GetBannerImg" :key="imaga.id">
            <img :src="imaga.url" alt="" />
          </van-swipe-item>
        </van-swipe>
      </van-col>
      <!-- 获取渠道 -->
      <van-col span="24" class="centre-img">
        <van-row type="flex" gutter="5px" style="margin: 20px 6px;">
          <van-col span="4" gutter="30px" v-for="(item, index) in GetChannel" :key="index" style="text-align: center; margin: 0px 6px;" @click="onGoGoodsClass(item)">
            <img :src="item.iconUrl" alt="" />
            <p>{{ item.name }}</p>
          </van-col>
        </van-row>
      </van-col>
      <!-- 分割线 -->
      <van-col class="partition"> </van-col>
      <!-- 优惠券 -->
      <div class="w ">
        <van-col span="24" style="text-align: center;" @click="$router.push('/allCoupon')">
          <p class="P">优惠券</p>
        </van-col>

        <!-- 优惠券广告 -->
        <van-col span="24" @click="onAddCoupon(item)" class="Coupons-centenr" v-for="(item, index) in GetCouponList" :key="item.id">
          <van-row>
            <van-col>
              <div class="top-span">
                <span>{{ item.tag }}</span>
              </div>
              <div class="top-p">{{ item.discount }}元</div>
              <div class="top-max">满{{ item.min }}元使用</div>
            </van-col>
            <van-col class="Coupons-centenr-text">
              <p class="text-p1">{{ item.name }}</p>
              <p class="text-p2">{{ item.desc }}</p>
              <p class="text-p3">有效期：{{ item.days }}天</p>
            </van-col>
          </van-row>
        </van-col>

        <!-- 优惠券内容 -->
        <van-col span="24" class="box1" v-for="(item, index) in GetgrouponList" :key="item.id">
          <van-row>
            <van-col span="7">
              <img :src="item.picUrl" alt="" class="Coupons-centenr-img" />
            </van-col>
            <van-col span="17">
              <p class="box1-p1">
                {{ item.name }}<span class="box1-span" style="font-size: 3px !important;">{{ item.grouponMember }}人成团</span>
              </p>
              <p class="box1-p2">有效期至{{ item.expireTime }}</p>
              <p class="box1-p3">{{ item.brief }}</p>
              <p class="box1-p4">
                <del>现价:￥{{ item.counterPrice }}</del>
                <span>团购价：￥{{ item.grouponPrice }}</span>
              </p>
            </van-col>
          </van-row>
        </van-col>
      </div>
      <!-- 分割线 -->
      <van-col class="partition"> </van-col>
      <!-- 品牌制造商直供 -->
      <van-col span="24" style="text-align: center;">
        <p class="P">品牌制造商直供</p>
      </van-col>
      <van-col span="24" class="brand">
        <van-row>
          <van-col span="12" class="img" v-for="(item, index) in GetBrandList" :key="index" @click="onGoShop(item)">
            <img :src="item.picUrl" alt="" />
            <div class="img-text">
              <p class="img-text-p1">{{ item.name }}</p>
              <p class="img-text-p2">{{ item.floorPrice }}元起</p>
            </div>
          </van-col>
        </van-row>
      </van-col>
      <!-- 分割线 -->
      <van-col class="partition"> </van-col>
      <!-- 周一周四·新品首发 -->
      <van-col span="24" style="text-align: center;">
        <p class="P">周一周四·新品首发</p>
      </van-col>
      <!-- 内容 -->
      <van-col span="24" class="Starting-centenr">
        <van-col span="12" justify="space-between" v-for="(item, index) in GetNewGoodsList" :key="index" @click="onGoGoods(item)">
          <img :src="item.picUrl" alt="" />
          <p>{{ item.name }}</p>
          <p>￥{{ item.retailPrice }}</p>
        </van-col>
      </van-col>
      <!-- 分割线 -->
      <van-col class="partition"> </van-col>
      <!-- 人气推荐 -->
      <van-col span="24" style="text-align: center;">
        <p class="P">人气推荐</p>
      </van-col>
      <!-- 内容 -->
      <div class="w">
        <van-col span="24" class="recommendation" v-for="(item, index) in GetHotGoodsList" :key="index" @click="onGoGoods(item)">
          <van-row>
            <van-col span="7">
              <img :src="item.picUrl" alt="" />
            </van-col>
            <van-col span="17">
              <p class="recommendation-p1">{{ item.name }}</p>
              <p class="recommendation-p2">{{ item.brief }}</p>
              <p class="recommendation-p3">￥{{ item.retailPrice }}</p>
            </van-col>
          </van-row>
        </van-col>
      </div>
      <!-- 分割线 -->
      <van-col class="partition"> </van-col>
      <!-- 专题精选-->
      <van-col span="24" style="text-align: center;">
        <p class="P">专题精选</p>
      </van-col>
      <div class="w ">
        <van-col class="special">
          <van-swipe class="my-swipe" indicator-color="white">
            <van-swipe-item v-for="(item, index) in GetTopicList" :key="index" @click="onGoGoods(item)">
              <img :src="item.picUrl" alt="" />
              <template>
                <p class="special-p1">
                  {{ item.title }} <span>￥{{ item.price }}元起</span>
                </p>
                <p class="special-p2 van-ellipsis">{{ item.subtitle }}</p>
              </template>
            </van-swipe-item>
          </van-swipe>
        </van-col>
      </div>
      <!-- 分割线 -->
      <!-- 使用双for循环内容 -->
      <div class="family-for" v-for="(item, index) in GetFloorGoodsList" :key="index">
        <van-col span="24" style="text-align: center; background-color: #F4F4F4;">
          <p class="P">{{ item.name }}</p>
        </van-col>
        <van-col class="family" span="24">
          <van-row type="flex" justify="space-between">
            <van-col span="12" v-for="(centenr, index) in item.goodsList" :key="index" @click="onGoGoods(centenr)">
              <div class="family-centenr">
                <img :src="centenr.picUrl" alt="" />
                <!-- van-ellipsis   多余的字体省略 -->
                <p class="family-centenr-p1 van-ellipsis">{{ centenr.name }}</p>
                <p class="family-centenr-p2">￥{{ centenr.retailPrice }}</p>
              </div>
            </van-col>
          </van-row>
        </van-col>
        <!-- 更多居家生活好物 -->
        <van-col span="24" style="text-align: center;">
          <p class="P">更多居家生活好物></p>
        </van-col>
      </div>
    </van-row>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  name,
  data() {
    return {
      current: 0,
      SearchValue: '',
      GetBannerImg: {}, //获取轮播图图片
      GetChannel: {}, //获取渠道 图片以及文字
      GetgrouponList: {}, //获取优惠券内容
      GetCouponList: {}, //获取优惠券 次数
      GetBrandList: {}, //获取优惠券内容
      GetNewGoodsList: {}, //获取首发内容
      GetHotGoodsList: {}, //获取人气推荐内容
      GetTopicList: {}, //获取专题推荐
      GetFloorGoodsList: {} //获取全部居家生活的内容
    }
  },
  mounted() {
    this.onGetData()
  },

  methods: {
    //获取数据
    onGetData() {
      this.$get('/home/index')
        .then(result => {
          this.GetBannerImg = result.data.data.banner //获取轮播图图片
          this.GetChannel = result.data.data.channel //获取轮播图图片
          this.GetgrouponList = result.data.data.grouponList //获取优惠券内容
          this.GetCouponList = result.data.data.couponList //获取优惠券次数
          this.GetBrandList = result.data.data.brandList //获取优惠券内容
          this.GetNewGoodsList = result.data.data.newGoodsList //获取首发内容
          this.GetHotGoodsList = result.data.data.hotGoodsList //获取人气推荐内容
          this.GetTopicList = result.data.data.topicList //获取专题推荐
          this.GetFloorGoodsList = result.data.data.floorGoodsList //获取专题推荐
        })
        .catch(err => {})
    },
    onChange(index) {
      this.current = index
    },
    // 前往店铺页面  传当前的店铺id
    onGoShop(item) {
      this.$router.push({ path: '/shop', query: item })
    },
    // 点击前往搜索页面
    onGoSearch() {
      this.$router.push('/search')
    },
    // 前往商品分类
    onGoGoodsClass(item) {
      this.$router.push({ path: '/goodsclass', query: item })
    },
    onAddCoupon(item) {
      let token = this.$jsCookie.get('token')
      if (!token) {
        Toast('请先登录')
        this.$router.push('/login')
      } else {
        this.$post('coupon/receive', { couponId: item.id })
          .then(result => {
            if (result.data.errno !== 0) {
              Toast.success('领取成功')
            } else {
              Toast.success(result.data.errmsg)
            }
          })
          .catch(err => {})
      }
    },
    // 前往商品详情
    onGoGoods(item) {
      let params = {
        id: item.id
      }
      this.$router.push({ path: '/goodslist', query: params })
    }
  }
}
</script>
<style lang="less" scoped>
// 轮播图图片
.P {
  margin: 16px 0;
}

.swipe-img {
  height: 1.9rem;
  img {
    height: 1.9rem;
  }
}
// <!-- 获取渠道 -->
.centre-img {
  img {
    height: 0.25rem;
  }
  p {
    font-size: 0.12rem;
  }
}
// 分割线
.partition {
  width: 100%;
  height: 0.1rem;
  background-color: #f4f4f4;
}
//优惠券广告
.Coupons-centenr {
  border-bottom: 1px solid #e5e4e2;
  padding-bottom: 15px;
  .van-row {
    height: 1rem;
    background: linear-gradient(to right, #cea667, #dfbb76);
    padding: 10px 0px 0px 5px;
    .Coupons-centenr-text {
      font-weight: 100;
      .text-p1 {
        font-size: 20px;
        color: #fff;
        margin: 15px 0px 10px 40px;
      }
      .text-p2 {
        font-size: 10px;
        font-weight: 100;
        color: #fff;
        margin: 0px 0px 5px 40px;
      }
      .text-p3 {
        font-size: 10px;
        font-weight: 100;
        color: #fff;
        margin: 0px 0px 5px 40px;
      }
    }
    .top-span {
      span {
        width: 40px;
        font-size: 5px !important;
        background-color: #9c7733;
        padding: 3px 7px;
        color: #f4f4f4;
        transform: scale(0.8);
        display: block;
      }
    }
    .top-max {
      font-size: 14px;
      color: #fff;
      font-weight: 100;
      margin-left: 15px;
      margin-top: 5px;
    }
    .top-p {
      font-size: 0.3rem;
      color: #a73e25;
      margin-left: 15px;
    }
  }
}
// 优惠券内容
.box1 {
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e4e2;
  font-size: 14px;
  .Coupons-centenr-img {
    width: 1.04rem;
    margin-top: 0.1rem;
  }
  .box1-p1 {
    margin: 15px 0 10px 0;
    font-size: 15px;

    .box1-span {
      width: 50px;
      background-color: #4187f2;
      transform: scale(0.6);
      color: #f4f4f4;
      margin-left: 0.1rem;
      font-size: 3px !important;
      padding: 2px 5px;
      border-radius: 3px;
    }
  }
  .box1-p2 {
    width: 65%;
    color: #f4f4f4;
    text-align: center;
    padding: 2px;
    font-size: 9px;
    background-color: #f19c73;
    border-radius: 30px;
    margin: 7px 0;
  }
  .box1-p3 {
    color: #a1a1a1;
    margin: 7px 0;
    font-size: 14px;
  }
  .box1-p4 {
    margin: 0px 0;
    del {
      color: #a1a1a1;
      font-size: 13px;
      margin-right: 30px;
    }
    span {
      color: #a68e56;
    }
  }
}
// 品牌制造商直供
.brand {
  .img {
    height: 105px;
    img {
      width: 100%;
      height: 105px;
    }
    position: relative;
  }
  .img-text {
    color: #f2f1f1;
    position: absolute;
    top: 15px;
    left: 15px;
    .img-text-p1 {
      margin: 1px;
    }
    .img-text-p2 {
      margin: 1px;
      font-size: 13px;
    }
  }
}
// 新品首发
.Starting-centenr {
  text-align: center;
  width: 100%;
  padding: 0.2rem;
  display: block;
  img {
    width: 100%;
  }
  p:nth-child(2) {
    font-size: 0.13rem;
    margin-top: -10px;
  }
  p:nth-child(3) {
    font-size: 0.14rem;
    color: #9c7733;
  }
}
// 人气推荐
.recommendation {
  border-top: 1px solid #e5e4e2;
  img {
    width: 100%;
  }
  .recommendation-p1 {
    font-size: 0.14rem;
    margin: 0.25rem 0rem 0rem 0.1rem;
  }
  .recommendation-p2 {
    font-size: 0.13rem;
    opacity: 0.5;
    margin: 0.05rem 0.1rem 0.05rem 0.1rem;
  }
  .recommendation-p3 {
    font-size: 0.14rem;
    color: #9c7733;
    margin: 0.1rem;
  }
}
// 专题推荐
.special {
  width: 100%;
  .my-swipe {
    img {
      width: 98%;
      height: 193px;
    }
    .special-p1 {
      font-size: 13px;
      margin: 5px 10px;
      span {
        color: #9c7733;
        margin-left: 15px;
        font-size: 15px;
      }
    }
    .special-p2 {
      margin: 0px 10px;
      font-size: 12px;
      opacity: 0.5;
      margin-bottom: 20px;
    }
  }
}
// 居家生活
.family {
  background-color: #f4f4f4;
  .van-col {
    padding: 2px;
    .family-centenr {
      width: 100%;
      background-color: #fff;
      height: 240px;
      text-align: center;
      img {
        width: 100%;
      }
      .family-centenr-p1 {
        font-size: 12px;
      }
      .family-centenr-p2 {
        font-size: 14px;
        color: #9c7733;
        margin-top: 0.05rem;
      }
    }
  }
}
</style>
